
<!doctype html>
<html class="no-js">
<#include "../../common/header.ftl">
<#include "../../common/upload.ftl">
<script src="${basePath}/js/topic/edit.js?v=201711021700"></script>
<head>
<meta charset="UTF-8">
<title>编辑话题</title>
<style>
	.text-td{
		width:14%;
		text-align: center;
	}
	.input-td{
		width:36%;
	}
	.tab-div{
		min-height:560px;
	}
	.left{
		float:left;
		min-width:100px;
		margin:2px 5px;
	}
	.selected{
		background-color: #00fff0;
	}
	.hide{
		display:none;
	}
	.blank-30{
		width:100%;
		height:30px;
		background-color: #e2e2e2;
	}
	body .layui-layer-content{overflow: 'visible'}
</style>
</head>
<body>
<form class="layui-form " action="#" >
<div class="layui-tab tab-div">
  <ul class="layui-tab-title">
    <li class="layui-this">基础信息</li>
    <li>关联商品/组货</li>
  </ul>
  <div class="layui-tab-content " >
    <div class="layui-tab-item layui-show">
	    	<table class="layui-table" lay-skin="line">
	    		<tr>
	    			<td class="text-td" style="width:120px;"><lable>标题*（12个中文字以内）</lable></td>
	    			<td class="input-td" colspan="3">
	    				<input type="text" id="title"  placeholder="请输入标题" value="${topic.title!}" autocomplete="off" class="layui-input"> 
	    			</td>
	    		</tr>
	    		<tr>
	    			<td class="text-td" style="width:120px;"><lable>标签*</lable></td>
	    			<td class="input-td">
	    				<input type="text" id="tag"  placeholder="请输入标签" value="${topic.tag!}" autocomplete="off" class="layui-input"> 
	    			</td>
	    			<td class="text-td" style="width:120px;"><lable>推荐商品标题</lable></td>
	    			<td class="input-td">
	    				<input type="text" id="goodsTitle"  placeholder="请输入推荐商品标题" value="${topic.goodsTitle!}" autocomplete="off" class="layui-input"> 
	    			</td>
	    		</tr>
	    		<tr>
	    			<td class="text-td" style="width:120px;"><lable>封面图(宽&nbsp;*&nbsp;高&nbsp;&nbsp;688&nbsp;*&nbsp;500)</lable></td>
	    			<td class="input-td" colspan="3">
						<div class="site-upload">
							<#if topic.coverImage??>
								<img id="coverImage" data-img="${topic.coverImage}" src="${imgUrl+topic.coverImage}" style="width:172px;height:125px;" >
							<#else>
								<img id="coverImage" data-img="" src="${basePath}/images/default_goods.jpg" style="width:172px;height:125px;" >
							</#if>
							<div class="site-upbar">
								<div class="layui-box">
									<form target="layui-upload-iframe" method="get" key="set-mine" enctype="multipart/form-data" action="#">
										 <input type="file" name="files" data-type="one" class="layui-upload-file" >
									</form>
									
								</div>
							</div>
						</div>
	    			</td>
	    		</tr>
	    		<tr>
	    			<td class="text-td" style="width:120px;"><lable>话题内容</lable></td>
	    			<td class="input-td" colspan="3">
						<div class="am-form-group">
							<textarea id="content" name="content"	style="width: 850px; height: 400px;">${topic.content!}</textarea>
						</div>
					</td>
	    		</tr>
	    	</table>
    </div>
    <div class="layui-tab-item ">
		<div class="layui-form-item">
			<label class="layui-form-label" style="width:112px;">推荐类型</label>
			<div class="layui-input-block">
				<#if topic.topicType??>
					<input type="radio" lay-filter="topicType"  name="topicType" value="goods" title="商品"  <#if  topic.topicType == "goods" >checked="checked"<#else> disabled</#if> />
					<input type="radio" lay-filter="topicType"  name="topicType" value="group" title="组货"  <#if  topic.topicType == "group">checked="checked"<#else> disabled</#if> />
				<#else>
					<input type="radio" lay-filter="topicType"  name="topicType" value="goods" title="商品"  checked="checked"/>
					<input type="radio" lay-filter="topicType"  name="topicType" value="group" title="组货" />
				
				</#if>
			</div>
		</div>
		<div class="layui-form-item goods-div hide">
		<button type="button" class="layui-btn layui-btn-normal" id="add-goods-button" >添加商品</button>
			<table class="table table-margin">
				<thead>
			      <tr>
			         <th>封面图</th>
			         <th>标题</th>
			         <th>价格</th>
			         <th>操作</th>
			      </tr>
			  </thead>
  			  <tbody>
  			    <#list topicGoodsList! as goods>
  			     <#if goods.dataType==1>
	  			  	<tr data-id="${goods.id}" data-dataId="${goods.dataId!}" data-type="1" data-goodsName="${goods.goodsName!}" data-price="${goods.goodsPrice!}" data-image="${goods.coverImage}">
	  			  		<td><#if goods.coverImage??>
								<img  src="${imgUrl+goods.coverImage}" height="50px" width="50px"
								 data-toggle="modal" data-target="#imgModal" onerror="this.src='${basePath}/images/default_goods.jpg'" />
							<#else>
								<img  src="${basePath}/image/default_goods.jpg" height="50px" width="50px"  data-toggle="modal" data-target="#imgModal"/> 
							</#if>
						</td>
	  			  		<td>${goods.goodsName!}</td>
	  			  		<td>${goods.goodsPrice?string('#0.00')}</td>
	  			  		<td><button type="button" class="layui-btn layui-btn-normal" onclick="deleteData(this)">删除</button>
						</td>
	  			  	</tr>
	  			  </#if>
  			  	</#list>
  			  </tbody>
			</table>
		</div>		
		<div class="layui-form-item group-div hide">
			<button type="button" class="layui-btn layui-btn-normal" id="add-group-button" >添加组货</button>
			<table class="table table-margin">
				<thead>
			      <tr >
			         <th>封面图</th>
			         <th>风格</th>
			         <th>场景</th>
			         <th>适合客群</th>
			         <th>操作</th>
			      </tr>
			  </thead>
  			  <tbody>
  			    <#list topicGoodsList! as group>
  			     <#if group.dataType==2>
	  			  	<tr data-id="${group.id}" data-dataId="${group.dataId!}" data-type="2" data-groupStyle="${group.groupStyle!}" data-groupScene="${group.groupScene!}" data-groupCustomer="${group.groupCustomer!}"
	  			  	 data-image="${group.coverImage}">
	  			  		<td><#if group.coverImage??>
								<img  src="${imgUrl+group.coverImage}" height="50px" width="50px"
								 data-toggle="modal" data-target="#imgModal" onerror="this.src='${basePath}/images/default_goods.jpg'" />
							<#else>
								<img  src="${basePath}/image/default_goods.jpg" height="50px" width="50px"  data-toggle="modal" data-target="#imgModal"/> 
							</#if>
						</td>
	  			  		<td>${group.groupStyle!}</td>
	  			  		<td>${group.groupScene!}</td>
	  			  		<td>${group.groupCustomer!}</td>
	  			  		<td><button type="button" class="layui-btn layui-btn-normal" onclick="deleteData(this)">删除</button>
						</td>
	  			  	</tr>
	  			  </#if>
  			  	</#list>
  			  </tbody>
			</table>
		</div>		
	</div>
  </div>
</div>
</form>
<div style="margin-left: 100px;margin-bottom:30px;">
<button type="button" class="layui-btn layui-btn-normal" style="margin-left: 100px;" id="save-button"><i class="layui-icon">&#xe605;</i>保存</button>
<button type="button" class="layui-btn layui-btn-normal" style="margin-left: 50px;" id="close-button"><i class="layui-icon">&#x1006;</i>关闭</button>
</div>
<script type="text/javascript">
var basePath="${basePath}";
var imgUrl="${imgUrl}";
var init={
	topicId:"${topic.id!}",
	topicType:"${topic.topicType!'goods'}",
    delId:""
}
layui.use(['form','element','upload','layer'],function(){
  var form = layui.form();
  var layer = layui.layer;
  element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
  form.on("radio(topicType)", function(data){
  	var type = data.value;
  	if(type=="goods"){
		$(".group-div").addClass("hide");
		$(".goods-div").removeClass("hide");
	}else{
		$(".group-div").removeClass("hide");
		$(".goods-div").addClass("hide");
	}
	init.topicType=type;
  })
  layui.upload({
    url: basePath+'/restful/file/upload.shtml', //上传接口
    ext: 'jpg|png|bmp|jpeg',
    method: 'post',
    success: function(res,input){ //上传成功后的回调
    	console.log(res);
      if(res.code=="000000"){
	    var id=res.data[0].id;
	    var src=imgUrl+id;
	    $("#coverImage").attr("src",src);
	    $("#coverImage").attr("data-img",id);
      }else{
      	layer.msg("上传失败")
      }
    }
  });
});
var editor;
KindEditor.ready(function(K) {
      editor = K.create('textarea[name="content"]',kind_editor_option);
});
$(document).ready(function(){
   if(init.topicType=="goods"){
   		$(".goods-div").removeClass("hide");
   }else{
   		$(".group-div").removeClass("hide");
   }
});
</script>
</body>
</html>
